<template>
  <div class="trainList">
    <div>
      <div class="lineardown el-icon-sunny"> 机车列表（{{trainData.length}}）</div>
      <p class="slopingside"> </p>
      <div class="linearup"> </div>
    </div>

    <el-table :data="trainDataPage" style="width: 100%">
      <el-table-column
          v-for="col in cols"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <!-- 分页底部 -->
    <el-pagination
        background
        style="margin-top: 3px; float: right"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="trainData.length"
    ></el-pagination>

  </div>
</template>

<script>
import {drawElements, initCanvas, updateElements} from "@/utils/RealTimeMonitoring/FlowChart";

export default {
  name: "trainList",
  data() {
    return {
      cols: [
        {prop: 'administration', label: '配属路局', width: '200'},
        {prop: 'depots', label: '配属机务段', width: '200'},
        {prop: 'type', label: '车型', width: '146'},
        {prop: 'train', label: '车号', width: '180'},
        {prop: 'capacity', label: '客/货类型', width: '167'},
        {prop: 'line', label: '运行线路', width: '129'},
      ],
      currentPage : 1,
      trainDataPage: [],
      pageSize: 5,
    }
  },
  computed: {
    trainData() {
      return this.$store.state.gMonitor.trainData;
    },
  },
  watch: {
    trainData: function (){
      this.handleCurrentChange(this.currentPage);
    },
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      let start = (currentPage - 1) * this.pageSize;
      this.trainDataPage = this.trainData.slice(start,start + this.pageSize);
    },
  }
}
</script>

<style>
.trainList {
  height: 330px;
}

/*表格表头样式*/
.trainList .el-table__header th.el-table__cell{
  height: 32px;
}
/*表格主体样式*/
.trainList .el-table__body td.el-table__cell{
  height: 40px;
}

/*表格主体每行高度*/
.trainList .el-table__row {
  height: 40px;
}

/*表头字体*/
.trainList .el-table__header th.el-table__cell .cell{
  font-size: 12px;
  font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 18px;
}
/*表内字体*/
.trainList .el-table__body td.el-table__cell .cell{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
}

/*右方的顶线*/
.trainList .linearup {
  border-top: 2px solid #1991EB;
  width: 847px;
  margin-left: -8px;
}

/*中间的过度的斜线线*/
.trainList .slopingside {
  border-top: 2px solid #1991EB;
  height: 0px;
  width: 36px;
  float: left;
  margin-top: 21px;
  transform: rotate(125deg);
  -o-transform: rotate(125deg);
  -moz-transform: rotate(125deg);
  -webkit-transform: rotate(125deg);
}

/*左方的底线*/
.trainList .lineardown {
  border-bottom: 2px solid #1991EB;
  width: 155px;
  font-size: 16px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 22px;
  margin-right: -8px;
}


.trainList .lineardown,
.trainList .linearup
{
  margin-bottom: 16px;
  margin-top: 7px;
  float:left;
  height:30px;
}

</style>
